<template>
	<!-- 轮播福利专场 -->
	<view class="container">
		<uni-nav-bar class="ch-nav" height="88rpx" backgroundColor="rgba(0,0,0,0)" leftWidth="90rpx" rightWidth="90rpx" color="#333333" :fixed="true" :padding="false" :border="false" @clickLeft="$goBack(1)">
			<template slot="left">
				<image class="left" src="@/public/images/other/fhjt_b-ys.png" mode="aspectFit"></image>
			</template>
			<text class="title"></text>
		</uni-nav-bar>
		<view class="empty" >
			
		</view>
		<view class="blank-box"></view>
		<EmptyContent v-if="!articleList[0]" top="260rpx" text="暂无更新的方案" img="qsy_zwxl" @refresh="getBenefitsList"></EmptyContent>
		<view class="body bottom-ios" v-else>
			<view class="list flex-c">
				<view class="article flex-c" v-for="(article, index) in articleList" :key="article.id+index" v-show="article.endPay !== true" @tap="goDetail(article.id, index)">
					<view class="article-time flex-r ac jsb">
						<text class="text-primary color-white text-bold">距离售卖截止仅剩</text>
						<uni-countdown
							class="countdown text-regular"
							color="#F23030"
							splitorColor="#FFFFFF"
							:show-day="false"
							:timestamp="new Date(article.endPayTime.toString().replace(/-/g, '/')).getTime() / 1000" 
							@timeup="deleteArticle(index)"
						/>
					</view>
					<view class="article-title flex-r jsb">
						<view class="title text-primary text-hidden two">
							<text>{{article.title}}</text>
						</view>
						<view class="price flex-c ac">
							<view class="num flex-r ac jc">
								<text class="text-regular text-bold color-red">{{article.benefitPrice}}</text>
								<image class="icon" src="@/public/images/public/chd_dd.png" mode="aspectFit"></image>
							</view>
							<text class="text-mini color-white">福利价</text>
						</view>
					</view>
					<ArticleMatch v-if="article.matchInfoList && article.matchInfoList[0]" :matchList="article.matchInfoList"></ArticleMatch>
					<template v-if="article.articleType==2">
						<view class="article-video" v-if="article.enablePay == 2 && article.freeVideoUrl">
							<FullVideo :url="article.freeVideoUrl" :article="true" width="670rpx" height="376rpx"></FullVideo>
						</view>
						<view class="article-video" v-else-if="article.enablePay == 1">
							<FullVideo :poster="require('@/public/images/public/t1-ys.jpg')" :article="true" width="670rpx" height="376rpx" v-if="article.sportId == 1"></FullVideo>
							<FullVideo :poster="require('@/public/images/public/lqt-ys.jpg')" :article="true" width="670rpx" height="376rpx" v-else></FullVideo>
						</view>
					</template>
					<view class="article-info text-mini color-grey flex-r ac">
						<uni-dateformat :date="article.displayTime" :threshold="[60000, 12*3600000]" format="MM-dd hh:mm"></uni-dateformat>
						{{new Date() - new Date(article.displayTime.replace(/-/ig, '/')) < 12*3600000 ? '发布' : ''}}
						<text class="views" v-if="article.virtualReadNum">{{article.virtualReadNum}}人查看</text>
						<text class="delete color-red">原价：{{article.payBeanValue}} 彩虹豆</text>
					</view>
					<view class="article-expert flex-r ac" @tap.stop="$CHS.goExpertHome(article.expertId)">
						<lazy-image class="avatar border-round" :src="article.expertAvatar+'?imageView2/1/w/100/h/100/q/50'" type="expert" fit="cover"></lazy-image>
						<text class="name text-secondary">{{article.expertName}}</text>
						<view class="taglist flex-r ac">
							<text class="tag-red" v-if="article.hotContineTxt">{{article.hotContineTxt}}</text>
							<text class="tag-gold" v-else-if="article.hitResultTxt">{{article.hitResultTxt}}</text>
							<text class="tag-season" :class="'rank'+article.rankTag" v-if="article.seasonRankTag">{{article. seasonRankTag}}</text>
						</view>
						<text class="experttag text-mini color-grey text-hidden">{{article.expertTag}}</text>
					</view>
				</view>
			</view>
			<view class="list-end flex-r mb20" v-if="isEnd && articleList[0]">
				<text>已经到底啦～</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				articleList: [],
				pageNo: 1,
				isEnd: false
			};
		},
		components: {
			ArticleMatch: () => import("@/components/ch-article/ch-articlematch.vue"),
		},
		onLoad() {
			this.getBenefitsList()
		},
		methods: {
			getBenefitsList() {
				this.$http.post({
					url: '/api/user/article/welfare',
					data: {
						finish: 2,
						label: '2',
						pageNo: this.pageNo,
						pageSize: 15
					}
				}).then((data)=>{
					console.log(data);
					if(data.success && data.result && data.result.total){
						if(data.result.current == 1){
							this.articleList = data.result.records
						}else{
							this.articleList.push(...data.result.records);
						}
						//更新结束状态
						this.isEnd = data.result.current >= data.result.pages
						//更新页数
						this.pageNo = data.result.current + 1
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//进入详情
			goDetail(id, index) {
				uni.$once('readNum', (data)=>{
					this.articleList[index].virtualReadNum = data.num
				})
				this.$CHS.goArticleDetail(id)
			},
			deleteArticle(index){
				this.$set(this.articleList[index], 'endPay', true)
				if(this.isEnd){
					let allEnd = this.articleList.every(item => item.endPay === true)
					if(allEnd){
						this.pageNo = 1
						this.isEnd = false
						this.getBenefitsList()
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		background-image: url('~@/public/images/other/flzc-ys.png');
		background-position: 0 -88rpx;
		background-size: 100%;
		background-repeat: no-repeat;
		min-height: var(--safe-height);
		position: relative;
		.ch-nav{
			.left{
				width: 64rpx;
				height: 64rpx;
			}
		}
		.blank-box{
			position: absolute;
			top: 312rpx;
			left: 0;
			width: 100%;
			height: 100rpx;
			background: linear-gradient(0deg, rgba(255,51,51,0) 0%, #FF3333 100%);
			z-index: 1;
		}
		/deep/ .empty-content{
			position: absolute;
			box-sizing: border-box;
			width: 710rpx;
			height: calc(var(--safe-height) - #{$navbar-height} - 110rpx);
			background-color: #FFFFFF;
			margin: 110rpx 20rpx 0;
			z-index: 2;
		}
	}
	.body{
		margin-top: 110rpx;
		padding: 0 20rpx;
		.article{
			background: #FFFFFF;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			z-index: 2;
			.article-time{
				height: 60rpx;
				background-image: url('~@/public/images/other/flbg-ys.png');
				background-position: 0 0;
				background-size: 100%;
				padding: 0 20rpx;
				/deep/ .countdown{
					.uni-countdown__number{
						width: 56rpx !important;
						font-size: 28rpx !important;
						font-weight: 500;
						background-image: url('~@/public/images/other/sfmm_bg-ys.png');
						background-size: 56rpx 40rpx;
					}
					.uni-countdown__splitor{
						margin: 0 10rpx;
						color: transparent !important;
						background-image: url('~@/public/images/other/flmh.png');
						background-size: 6rpx 20rpx;
						background-position: center center;
						background-repeat: no-repeat;
					}
				}
			}
			.article-title{
				padding: 20rpx;
				.title{
					line-height: 42rpx;
					max-width: 536rpx;
				}
				.price{
					align-self: center;
					width: 116rpx;
					height: 70rpx;
					border-radius: 4rpx;
					background: linear-gradient(90deg, #FF0000 0%, #FF00FF 100%);
					.num{
						margin: 2rpx 2rpx 0;
						width: 112rpx;
						height: 36rpx;
						border-radius: 4rpx;
						background-color: #fff;
						background-origin: content-box;
						box-sizing: border-box;
						.icon{
							margin-left: 8rpx;
							width: 26rpx;
							height: 26rpx;
						}
					}
					.text-mini{
						line-height: 32rpx;
					}
				}
			}
			/deep/ .article-match{
				margin-left: 20rpx;
			}
			.article-video{
				margin: 20rpx 0 0 20rpx;
			}
			.article-info{
				margin: 20rpx 20rpx 0;
				padding-bottom: 20rpx;
				box-shadow: 0rpx 1rpx 0rpx 0rpx #EDEDED;
				.views{
					flex: 2;
					margin-left: 20rpx;
				}
				.color-red{
					color: #F35252;
				}
			}
			.article-expert{
				padding: 20rpx;
				.avatar{
					width: 56rpx;
					height: 56rpx;
					margin-right: 20rpx;
				}
				.taglist{
					flex: 2;
				}
				.experttag{
					max-width: 120rpx;
				}
			}
		}
	}
</style>
